<template>
	<!--  委外-->
	<div class="content">
		<div class="pageSearchView">
			<el-form :inline="true" :model="searchParam" class="demo-form-inline">
				<el-form-item label="产品">
					<el-select v-model="searchParam.productId" placeholder="请选择选择产品" filterable clearable style="width: 250px"
										 @change="productChange">
						<el-option v-for="(item, index) of productList" :key="index" :label="item.productName"
											 :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="追溯码">
					<el-select v-model="searchParam.traceCodeId" placeholder="请选择追溯码" filterable clearable
										 style="width: 300px" @change="getList">
						<el-option v-for="(item, index) of traceabList" :key="index" :label="item.reportTraceCode"
											 :value="item.id">
							<span style="float: left">{{ item.reportTraceCode }}</span>
							<span style="float: right;color:#777">{{ item.reportWorkRecordNo }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div class="pageTableView">
			<div class="pageTableContent">
				<el-tabs v-model="activeTab" @tab-click="handleTabClick">
					<el-tab-pane label="原材料" name="material">
						<MaterialComponent :productId="searchParam.productId" :preorderTraceCodeList="preorderTraceCodeList"></MaterialComponent>
					</el-tab-pane>
					<el-tab-pane label="生产过程" name="production">
						<ProductionComponent :productId="searchParam.productId" :preorderTraceCodeList="preorderTraceCodeList"></ProductionComponent>
					</el-tab-pane>
					<el-tab-pane label="委外情况" name="outsourcing">
						<OutsourcingComponent :productId="searchParam.productId" :preorderTraceCodeList="preorderTraceCodeList"></OutsourcingComponent>
						<!-- 委外情况内容 -->
					</el-tab-pane>
					<el-tab-pane label="成品发料" name="finishedProduct">
						<FinishedProductComponent :productId="searchParam.productId" :preorderTraceCodeList="preorderTraceCodeList"></FinishedProductComponent>
						<!-- 成品发料内容 -->
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import axiosInstance from '@/utils/http/api';
import { Delete, Edit, Plus, Refresh, Search } from '@element-plus/icons-vue';
import MaterialComponent from '../qualityReport/traceabilityReportComponent/MaterialComponent.vue';
import ProductionComponent from '../qualityReport/traceabilityReportComponent/ProductionComponent.vue';
import OutsourcingComponent from '../qualityReport/traceabilityReportComponent/OutsourcingComponent.vue';
import FinishedProductComponent from '../qualityReport/traceabilityReportComponent/FinishedProductComponent.vue';

const activeTab = ref('material');

const handleTabClick = (tab) => {
	console.log(`当前激活的标签页是：${tab.props.name}`);
};

// 一开始执行
onMounted(() => {
	getOptions();
	// getList();
});

const pageSearch = ref({
	current: 1,
	pageSize: 10
});
const traceabList = ref([]);
const productChange = (e) => {
	const materialId = productList.value.find(item => item.id == e).materialId;
	const productId = e;
	searchParam.value.traceCodeId = null;
	axiosInstance.post('/api/planOrder/reportWorkRecordReport', {
		materialId,
		productId,
		current: 1,
		pageSize: 99999
	}).then(res => {
		if (res.code !== 200) {
			ElMessage.error(res.message);
			return false;
		}
		traceabList.value = res.data.records;
	});
};
const preorderTraceCodeList = ref([]);
const searchParam = ref({});//页面检索条件
const productList = ref([]);
const getOptions = () => {
	axiosInstance.post('/api/basedataProduct/getAll', {})
		.then(res => {
			productList.value = res.data;
		});
};
const getList = (e) => {
	let traceCode = traceabList.value.find(item => item.id == e).reportTraceCode;

	axiosInstance.post('/api/traceCode/findPreTraceCodeList', {
		traceCode
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			preorderTraceCodeList.value = res.data;
			// preorderTraceCodeList.value = ['UBJ3430J4443J456*****************', 'UBJ3430J444**********************', 'UBJ343***************************'];
		})
		.catch(error => {
			// 处理请求过程中发生的错误
			console.error('Error fetching pre trace code list:', error);
			ElMessage.error('Error fetching pre trace code list');
		});


};

</script>
<style scoped></style>
